<template>
  <div class="amap-page-container">
    <el-amap :zoom="zoom" :center="center" vid="amapDemo" class="amap-demo">
      <el-amap-circle
        v-for="(circle,index) in circles"
        :key="index"
        :center="circle.center"
        :radius="circle.radius"
        :fill-opacity="circle.fillOpacity"
        :events="circle.events"/>
    </el-amap>
  </div>
</template>

<style lang="scss" scoped>
    .amap-page-container {
      height: 400px;
      width:400px;
      position: relative;
      .icon-i{
        position:absolute;
        top:10px;
        display: block;
        height:30px;
        width:30px;
        font-size:30px;
        z-index: 10;
        right:10px;
        color:#000;
        opacity: 0.5;
      }
    }
</style>
<script>
module.exports = {
  data() {
    return {
      // 准备接收在后端返回的经纬度
      Latitude: '',
      Longitude: ''
    }
  },
  props: [],
  created() {
    console.log(this.mapState)
  },
  data() {
    return {
      zoom: 15,
      center: [121.5273285, 31.21515044],
      circles: [
        {
          center: [121.5273285, 31.21515044],
          radius: 200,
          fillOpacity: 0.5,
          events: {
            click: () => {
              alert('click')
            }
          }
        }
      ]
    }
  }
}
</script>
<style>

</style>
